<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container-fluid">
        <form>
            <div class="form-group">
                <label for="js-24-rgb">24RGB颜色值(例如:ff0000)</label>
                <input type="text" class="form-control" id="js-24-rgb" aria-describedby="emailHelp" placeholder="">
                <small id="emailHelp" class="form-text text-muted">填写24位颜色的16进制数字（ff0000）.</small>
            </div>
            <div class="form-group">
                <label for="js-10-rgb">24RGB的10进制</label>
                <input type="text" class="form-control" id="js-10-rgb" placeholder="">
            </div>
            <div class="form-group">
                <label for="js-16-rgb">16位RGB的16进制</label>
                <input type="text" class="form-control" id="js-16-rgb" placeholder="">
            </div>
        </form>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
        <script>
        $(document).ready(function(){
            $('#js-24-rgb').keyup(function(){
                var v = $(this).val();
                if(v.length == 6){
                    var r = v.substring(0,2);
                    var g = v.substring(2,4);
                    var b = v.substring(4,6);
                    
                    var r10 = parseInt(r,16); // 3
                    var g10 = parseInt(g,16); // 2
                    var b10 = parseInt(b,16); // 3
                    if(isNaN(r10)|| isNaN(g10)|| isNaN(b10)){
                        alert("输入的数字有问题");
                    }

                    $('#js-10-rgb').val("R:"+r10 + "  G:"+g10 + "  B:"+b10);

                    var r2 = new String((r10 >> 3).toString(2));
                    var g2 = (g10 >> 2).toString(2);
                    var b2 = (b10 >> 3).toString(2);
                    var length = r2.length;

                    for(var i = 0; i < 5 - length;i++){
                        r2 = "0"+r2;
                    }
                    str = r2;
                    length = g2.length;
                    for(var i = 0; i < 6 - length; i++){
                        g2 = "0" + g2;
                    }
                    str += g2;
                    length = b2.length
                    for(var i = 0; i<  5-length; i++){
                        b2 = "0" + b2;
                    }
                    str += b2;
                    if(str.length != 16){
                        alert('输入数字有问题');
                    }

                    var r16 = str.substring(0,4);
                    var g16 = str.substring(4,8);
                    var b16 = str.substring(8,12);
                    var a16 = str.substring(12,16);

                    var strR16 = parseInt(r16,2).toString(16);
                    var strG16 = parseInt(g16,2).toString(16);
                    var strB16 = parseInt(b16,2).toString(16);
                    var strA16 = parseInt(a16,2).toString(16);

                    $('#js-16-rgb').val(strR16+strG16+strB16+strA16);
                }
            });
        });
        </script>
</body>

</html>